<template>
    <div>  
        <el-descriptions>
            <!-- 自定义title -->
            <template #title v-if="title">
                <div style="display:flex;align-items:center;" v-show="exhibition">
                    <el-tag size="small">{{detail.type}}</el-tag>
                    <el-button size="mini" type="success" circle style="margin:0 5px;fontSize:20px;"></el-button>
                    <span>{{detail.name}}</span>
                </div>
            </template> 
            <!--  -->
            <template v-for='column in options'>
                <el-descriptions-item :label='column.label' :key="column.value" :span="1">

                    <el-tooltip class="tooltip" effect="dark" :content="column.value" placement="top-start">
                        <span :contentStyle="{'text-align': 'right'}" class="contentStyle">{{column.value}}</span>
                    </el-tooltip>

                </el-descriptions-item>
            </template>
        </el-descriptions>
    </div>
</template>

<script>
export default {
    //列表数据 
    props: {
        detail:{
            type:Object,
            default:()=>{
                return {}
            }
        },

        options:{
            type:Array,
            default:()=>{
                return []
            }
        },
        title:{
            type:Boolean,
            default:true
        },
        exhibition:{
            type:Boolean,
            default:false
        }
    }        
}
</script>

<style lang="less" scoped>
/deep/.el-descriptions__header{
  margin-bottom: 0px;
}
/deep/.el-descriptions{
    width: 380px;
    // border:1px solid #dcdcdc;
}
.tooltip:hover{
    cursor: pointer;
}
.contentStyle{
    display: inline-block;
    width: 150px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
    text-align: end;
    vertical-align:bottom;
}
</style>